<template>
  <Suspense>
    <el-config-provider :locale="locale" :size="size" v-if="show">
      <!-- 开启水印 -->
      <el-watermark
        v-if="watermarkEnabled"
        :font="{ color: fontColor }"
        :content="defaultSettings.watermarkContent"
        :z-index="9999"
        class="wh-full"
      >
        <router-view />
      </el-watermark>
      <!-- 关闭水印 -->
      <router-view v-else />
    </el-config-provider>
  </Suspense>
</template>

<script setup>
import { useAppStore, useSettingsStore } from '@/store';
import defaultSettings from '@/settings';
import { ThemeEnum } from '@/enums';
import { VxeUI } from 'vxe-table';
import usePageConfig from '@/composables/usePageConfig';

// 获取全局appStore
const appStore = useAppStore();
// 获取全局设置信息
const settingsStore = useSettingsStore();
//  计算属性
const locale = computed(() => appStore.locale);
const size = computed(() => appStore.size);
const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);

// 明亮/暗黑主题水印字体颜色适配
const show = ref(true);
const fontColor = computed(() => {
  return settingsStore.theme === ThemeEnum.DARK
    ? 'rgba(255, 255, 255, .15)'
    : 'rgba(0, 0, 0, .15)';
});

// 统一设置VxeUI的尺寸、语言和主题
const updateVxeUIConfig = () => {
  VxeUI.setConfig({ size: appStore.vxeSize });
  const languageMap = appStore.getLanguageMap();
  const currentLangConfig = languageMap[appStore.language];
  if (currentLangConfig && currentLangConfig.vxeCode) {
    VxeUI.setLanguage(currentLangConfig.vxeCode);
  }
  VxeUI.setTheme(settingsStore.theme);
};

/**
 * 监听 appStore.vxeSize, appStore.language 和 settingsStore.theme 的变化
 * 自动切换VxeUI的大小、语言和主题
 */
watch(
  () => [appStore.vxeSize, appStore.language, settingsStore.theme],
  () => {
    updateVxeUIConfig();
  },
);

// 设置页面的语言和标题
usePageConfig();

// 初始化时设置 VxeUI 的语言、大小和主题
onMounted(() => {
  updateVxeUIConfig();
});
</script>
